<template>
      <section class="top-img">
      </section>
      <section class="main">
        <slot name="main">
          <div class="default">本部分并未开发完成</div>
        </slot>
      </section>
      <section class="right" id="right-aside" ref="right">
        <slot name="aside-right">
          <div class="default">本部分并未开发完成</div>
        </slot>
      </section>
</template>
<script>
import {ref,onMounted} from 'vue'

function fixRight(){
  const right = ref(null)
  onMounted(()=>{
    const pos = right.value.offsetTop
    document.addEventListener('scroll',(event)=>{
      if(document.documentElement.scrollTop>pos){
        //fixed是相对于窗口的，这里有margin，所以不会顶到头
        right.value.style = 'position:fixed;top:-10vh'
      }else{
        right.value.style = ''
      }
    })
  })
  return right
}

export default{

  setup(){
    const right = fixRight()

    return{
      right
    }
  }
}
</script>
<style scoped lang="less">
    .top-img{
      width: 100%;
      height: 30vh;
      background-image: url('../assets/img/top.webp');
      background-size: 100% 100%;
    }

    .main{
        width: 60vw;
        // height: 80vh;
        border-radius: .5vw;
        margin: 10vh 6vw;
        display: inline-block;
        background: #EFF3F8;
    }
    .right{
      width: 20vw;
      background: lightblue;
      margin-top: 15vh;
      margin-right: 6vw;
      display: inline-block;
      vertical-align: top;
      // float: right;
      // position: fixed;
      // top: 10vh;
    }

    .default{
      height: 50vh;
    }
</style>